class: center, middle, inverse, title-slide .title[ # {detourr} ] .subtitle[ ## Interactive and performant tour visuals for the web ] .author[ ### Casper Hart ] .date[ ### 2022-06-22 ] --- <link href='//fonts.googleapis.com/css?family=Montserrat:thin,extra-light,light,100,200,300,400,500,600,700,800' rel='stylesheet' type='text/css'> # Background on tours -- A tour is sequence of projections of data displayed as an animation -- 1. Choose a sequence of projections and interpolate between them; The **tour path** `\(\mathbf{A}_1 \dots \mathbf{A}_t\)` -- 2. Display the projected data `\(\mathbf{Y}_i = \mathbf{XA}_i\)` as an animation; The **display method** -- Example **{tourr}**: <div width="100%" style="display: flex; justify-content: center"> <img src="penguins.gif" height="350"/> </div> --- class: center, inverse, middle, title-slide # Motivation --- # Interactivity ๐ <div width="100%" style="display: flex; justify-content: center"> <img src="penguins.gif" height="450"/> </div> --- # Performance ๐ <div width="100%" style="display: flex; justify-content: center"> <img src="tourr_performance.gif" height="450" /> </div> --- # Portability... ๐ญ <img src="tour_html.gif" width="100%" /> --- class: center, middle, inverse, title-slide # How do we get around these limitations? # ๐ง ๐ค ๐ง --- class: center, middle <img src="detourr_logo.png" height="400" /> .strong[ AHEAD ] .strong[ FOLLOW <img src="right_arrow.png" height="30" /> <img src="github_logo.png" height="30" /> <img src="twit.svg" height="30" /> @casperhart ] --- # Introducing `{detourr}`
--- # Interactivity ๐ฎ .pull-left[ .big[ - Orbit Controls - Selection and Brushing - Timeline - Labels ] ] .pull-right[
] --- # Portability ๐ `{detourr}` visuals are written in TypeScript / JavaScript, using `{HTMLWidgets}` to work with R. It runs well with: - Any browser - RStudio - VScode - Knitr (with html output) - Shiny - `{xaringan}` slides --- # Performance ๐ฅน
--- # Linked selection with `{crosstalk}` ๐ฎ
--- # Linked selection with `{crosstalk}` ๐ฎ Compatible with: - `plotly/plotly.R` - `rstudio/leaflet` - `rstudio/DT` - `glin/reactable` - `jbkunst/highcharter` --- class: center, inverse, middle, title-slide # User API # ๐ฉโ๐ป --- # Data and aesthetics ๐ฉโ๐ป `{detourr}` has a declarative API for building a tour visual. Instantiate a `detour` object with `detour()`: .panelset[ .panel[.panel-name[R Code] ```r install.packages("detourr") # -or- remotes::install_github("casperhart/detourr") ``` ```r *detour( penguins, tour_aes(projection = bill_length_mm:body_mass_g, colour = species) ) ``` ] .panel[.panel-name[Output] ``` #> # A tibble: 0 ร 2 #> # โฆ with 2 variables: is_new_basis <lgl>, projection_matrix <list> ``` ] ] --- # Tour path ๐ฃ .panelset[ .panel[.panel-name[R Code] ```r detour( penguins, tour_aes(projection = bill_length_mm:body_mass_g, colour = species) *) |> tour_path(grand_tour(3)) ``` ] .panel[.panel-name[Output] ``` #> # A tibble: 350 ร 2 #> is_new_basis projection_matrix #> <lgl> <list> #> 1 TRUE <dbl [4 ร 3]> #> 2 FALSE <dbl [4 ร 3]> #> 3 FALSE <dbl [4 ร 3]> #> 4 FALSE <dbl [4 ร 3]> #> 5 FALSE <dbl [4 ร 3]> #> # โฆ with 345 more rows ``` ] ] --- # Display ๐บ .panelset[ .panel[.panel-name[R Code] ```r detour( penguins, tour_aes(projection = bill_length_mm:body_mass_g, colour = species) ) |> tour_path(grand_tour(3)) |> * show_scatter() ``` ] .panel[.panel-name[Output]
] ] --- class: center, middle # data |> tour path |> display method --- class: center, middle # detour() |> tour\_path() |> show\_*() --- class: center, inverse, middle, title-slide # Display methods ๐บ --- # `show_scatter()` ๐บ
--- # `show_scatter()` ๐บ
--- # `show_sage()` ๐ชด
--- # `show_sage()` ๐ชด
--- # `show_slice()` ๐ฐ
--- # `show_slice()` ๐ฐ
--- class: center, inverse, middle, title-slide # Performance # ๐ --- # Scripting ๐ Javascript is... pretty quick! <img src="chrome_speed.png" width="800"/><img src="v8.svg" width="150" height="150" /> --- class: center, middle <img src="dataflow.svg" height="450"> --- # Matrix operations ๐ **{detourr}** uses **TensorFlow.js** with the **Webassembly** backend for linear algebra operations. This uses the Google XNNPACK library, leveraging **SIMD** and **Threads**. <img src="perf-comparison.svg" height="400" align="left" /> <img src="tensorflow.svg" height="100" align="right" /> <img src="webassembly.svg" height="100" align="right" /> --- # Rendering ๐ .pull-left[ - ๐ข SVG is good at rendering **large** objects, but is slow when rendering **many** objects. Alternative: - ๐ HTML5 Canvas + **WebGL** (GPU) Implemented with **Three.js** ] .pull-right[ <img src="rick-bobby-will-ferrell.gif" width="500" /> <img src="html5.svg" height="100" /> <img src="webgl.svg" height="100" /> <img src="three.svg" height="100" /> ] --- # Contributions welcome <img src="github_logo.png" height="40" /> -- #### More visuals! -- - density plot - histogram - Andrew's plot - PCP -- #### More features! -- - facetting - legends - point symbols -- #### More performance! -- - WASM module for sage tour? - TensorFlow WebGL? --- # Emojis required <img src="trollface.jpeg" height="40"> <div width="100%" style="display: flex; justify-content: center"> <img src=commits.png height="450"> </div> <!-- Sage display: Laa, Ursula, Dianne Cook, and Stuart Lee. 2021. โBurning Sage: Reversing the Curse of Dimensionality in the Visualization of High-Dimensional Data.โJournal of Computational and Graphical Statistics, 1โ10. Slice display: Laa, Ursula, Dianne Cook, and German Valencia. 2020. โA Slice Tour for Finding Hollowness in High-Dimensional Data.โJournal of Computational and Graphical Statistics 29 (3): 681โ87. pdfsense dataset: Wang, B.-T., Hobbs, T. J., Doyle, S., Gao, J., Hou, T.-J., Nadolsky, P. M., & Olness, F. I. (2018). PDFSense: Mapping the sensitivity of hadronic experiments to nucleon structure. Retrieved from <https://arxiv.org/abs/1808.07470> Cook, D., Laa, U., & Valencia, G. (2018). Dynamical projections for the visualization of PDFSense data. The European Physical Journal C, 78(9), 742. doi: 10.1140/epjc/s10052-018-6205-2 (URL:https://doi.org/10.1140/epjc/s10052-018-6205-2) {tourr}: Wickham, Hadley, Dianne Cook, Heike Hofmann, and Andreas Buja. 2011. โTourr: An r Package for Exploring Multivariate Data with Projections.โJournal of Statistical Software 40: 1โ18. --> --- class: center, middle #### Slides: ## github.com/casperhart/paper-detourr #### Package website: ## casperhart.github.io/detourr <img src="github_logo.png" height="30" /> <img src="twit.svg" height="30" /> @casperhart